
<template>
  <div class="full-height">
		
    <van-nav-bar
		  v-if="isTitle || switch153 === 1"
      fixed
      title="超级拼团"
      left-arrow
      class="head-color color-white"
      @click-left="$utils.back($route.path)"
    />
		<div v-else class="flex flex-v-c head-color pos-f">
			<svg-icon icon-class="right" class="fs-22 mt-20 tran color-white" @goPage="clickLeft"/>
			<div class="text-show-line-1 color-white fs-28 ml-20" @click="nearbyShopShow = true">
				<svg-icon icon-class="location" class="mr-10 " @goPage="nearbyShopShow = true" />
				{{ storeName }}
			</div>
		</div>
		<!-- 超值团购-->
		<div class="head-color has-top scrollBox" id="scrollBox" ref="scrollBox">
			<div>
				<img src="../../assets/images/group.png" />
			</div>
			<van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false"
					@load="moreData">
				<div class="mg-24 pb-30" v-if="groupdata.length >0" >
					<div class="info bg-white" v-for="(item,index) in groupdata" :key="index" @click="goaction(item)">
						<imgBox :img-url="item.ThumbnailUrl410" class="is-260 br-16 picimg" />
						<div class="inforight">
							<div>
								<p class="infoname mb-12">{{ item.ProductName }}</p>
								<div>
										<div class=" specall " v-for="(iitem,index) in item.TagsList" :key="index" >
											<div class="spec ">{{ iitem.TagName }}</div>
										</div>
										<div class="solidheight" v-if="item.TagsList.length === 0"></div>
								</div>
							</div>
							
							<div class="ptend">
								<span class="pin">{{ item.GroupCount }}人团</span>
								<span class="endtime">截止{{ item.EndTime }}</span>
							</div>
							<div class="flex flex-s-c">
								<div>
										<div class="cssSaleMinPrice">
											<span class="fs-24 ">￥</span>
											<span class="fs-40 fw-b mr-5">{{ item.GroupPrice }}</span>
										</div>
										<div class="fs-24 originprice" v-if="item.MarkePrice != 0">￥{{ item.MarkePrice }}</div>
								</div>
								<div class="msbtn" @click="goaction(item)">立即参团</div>
							</div>
							
						</div>
					</div>
				</div>
			</van-list>
		</div>
		<van-popup v-model="nearbyShopShow" position="bottom" style="height:100vh;">
			<nearbyShop @close="nearbyShopShow=false" :isActive="isActive" @changeStore="changeStore" />
    </van-popup>

  </div>
</template>
<script>
import imgBox from 'components/imgBox';
import SvgIcon from 'components/SvgIcon'
import {  GetGroupProductPage,GetNowTime } from 'api/activity'
import { GetUserDetail } from 'api/member'
import { GetStoreInfo } from 'api/store'
import { GetBusinessFunction } from 'api/businessSetting'
import nearbyShop from '../shopProductList/nearbyShop.vue'
export default {
  components: {
		imgBox,SvgIcon,nearbyShop
  },
  data() {
    return {
			loading: false, // 加载load
			finished: false, // 无更多数据
			storeId: 0,
			groupdata:[],
			requestData: {
				"groupType": 0,
				"isRetail": 1,
				"pageIndex": 1,
				"pageSize": 10
      },
			isTitle: true,
			storeName: '请选择门店',
			nearbyShopShow: false, //门店弹窗
			switch153: 0,
			isActive: true,
			// 滚动状态
			totalAmout: 0,
      scollRequest: true,
      end: false
    }
  },
  created() {
		localStorage.removeItem('storeId')
		if(this.$route.params.id === '1'){
			this.isTitle = false
		}
		this.requestData.isRetail = this.$route.params.id
		if(this.$route.query.storeId){
			this.storeId = this.$route.query.storeId
			this.requestData.storeId = this.storeId
			this.GetStoreInfo()
			console.log("222")
		}else if(localStorage.getItem('storeId')){
			this.storeId = localStorage.getItem('storeId')
			this.requestData.storeId = this.storeId
			this.GetStoreInfo()
			console.log("333")
		}else if(this.$route.params.id === '1'){
			this.GetUserDetail()
		}
		
		if(this.$route.query.hideStore === '1'){
			this.isTitle = true
		}
		
  },
  mounted() {
		this.$nextTick(() =>{
			if(this.storeId !== 0 || this.requestData.isRetail === '0'){
				this.getgroupdata()
			}
		})
    this.$nextTick(function() {
      document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
		GetStoreInfo(){
			const obj = {}
			obj.id = this.storeId
			GetStoreInfo(obj).then(res =>{
				if(res.Data){
					this.storeName = res.Data.Name
				}
			})
		},
		GetUserDetail(){
			GetUserDetail().then(res =>{
				if(res.Data){
					this.storeId = res.Data.DisId
					this.requestData.storeId = this.storeId
					if(this.storeId !== 0){
						this.GetStoreInfo()
						console.log("444")
						this.getgroupdata()
					}
				}
			})
		},
		//获取开关权限
		GetBusinessFunction(){
      GetBusinessFunction(153).then(res => {
        if (res) {
          this.switch153 = res.Data[0].Value;
        }
      })
    },
		changeStore(item){
			this.storeId = item.ID
			this.storeName = item.Name
			this.nearbyShopShow = false
			this.requestData.storeId = this.storeId
			this.requestData.pageIndex = 1
			this.groupdata = []
			this.getgroupdata()
		},
		getgroupdata(){
			const _this = this
			_this.loading = true
			GetGroupProductPage(this.requestData).then((res) => {
				if (res.Data) {
					if (res.State == 0) {
							return
					}
					if (_this.requestData.pageIndex >= res.Data.TotalAmout) {
							_this.finished = true
					} else {
							_this.finished = false
					}
					_this.loading = false
					_this.totalAmout = res.Data.TotalAmout
					_this.groupdata = _this.groupdata.concat(res.Data.Data)
				}else{
					_this.finished = true
					_this.loading = false
				}
			})
		},
    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <= 5) {
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          _this.scollTop = this.$utils.getScrollTop('scrollBox')
          if (_this.requestData.pageIndex < _this.totalAmout) {
            _this.requestData.pageIndex++
            _this.getgroupdata()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    },
		// 上拉加载更多
		moreData() {
			this.requestData.pageIndex = this.requestData.pageIndex + 1
			this.getgroupdata()
		},
		//立即拼团
		goaction(item){
			let id = item.ProductId
			let store_id = item.StoreId
			if(store_id > 0){
				localStorage.setItem('storeId',store_id)
			}
			if(this.requestData.isRetail === '1'){
				window.location.href = this.$LocalDomain + '/circle/#/quickPlaceOrder/retailDetail/'+id +'?storeId=' + store_id
			}else{
				window.location.href = this.$LocalDomain + '/circle/#/quickPlaceOrder/detail/'+id
			}
			//window.location.href = this.$LocalDomain + '/m/retail/productdetail?id='+id+'&groupType='+0+'&navStoreId='+store_id
			
		},

		clickLeft() {
			localStorage.removeItem('storeId')
			this.$utils.back(this.$route.path)
    },
		
  }
}
</script>
<style lang="scss" scoped>
.full-height{
	height: 100vh;
	background: #FE2E43;
}
.color-white{
  /deep/.van-icon{
    color:#fff;
  }
  /deep/.van-nav-bar__title{
    color:#fff;
  }
}
.head-color{
	background: linear-gradient(90deg,#f7303f 0,#f73140  38%,#f7303f 100%),linear-gradient(transparent,transparent);
}
.info{
	border-radius: 16px;
	height: 280px;
	//padding: 24px;
	display: flex;
	margin-bottom: 16px;
	padding: 10px;
	.picimg{
		width: 280px;
		border-radius: 16px;
		overflow: hidden;
	}
}
.inforight{
	width: calc(100% - 280px);
	margin-left: 16px;
	display: flex;
  flex-direction: column;
	justify-content: space-between;
	.infoname{
		font-size: 28px;
		font-weight: 600px;
		-webkit-box-orient: vertical;
		-webkit-line-clamp:1;
		text-overflow:ellipsis;
		overflow: hidden;
		white-space:nowrap;
	}
	.specall{
		display: inline-flex;
		margin-bottom: 20px;
	}
	.spec{
		background: #FEF8E1 ;
		border-radius: 8px;
		color: #FE8000;
		text-align: center;
		font-size: 22px;
		margin-right: 15px;
		height: 40px;
		line-height: 40px;
		padding: 0 10px;
	}

	.originprice{
		text-decoration:line-through;
		color: #B2B2B2;
		height: 34px;
		line-height: 34px;
	}
	.msbtn{
		width: 140px;
		height: 62px;
		line-height: 62px;
		text-align: center;
		background: #FF2234;
		border-radius: 34px;
		color: white;
	}
}
.cssSaleMinPrice{
	color: #F32815;
	height: 48px;
	line-height: 48px;
}
.pin{
	background: #FFEBEE;
	border-radius: 4px 0px 0px 4px;
	font-size: 22px;
	color: #F32815;
	padding: 0 4px;
}
.endtime{
	color: #F32815;
	font-size: 20px;
	border-radius: 0px 4px 4px 0px;
	border: 1px solid #FFEBEE;
	padding: 0 5px;
}
.ptend{
	-webkit-box-orient: vertical;
	-webkit-line-clamp:1;
	text-overflow:ellipsis;
	overflow: hidden;
	white-space:nowrap;
}
.tran{
	transform: rotateZ(180deg);
	margin: 0 20px;
}
.store-name{
	width: 388px;
	height: 64px;
	line-height: 64px;
	background: linear-gradient(273deg, #FE5461 0%, #FF755A 26%, #FE190E 100%);
	border-radius: 32px;
	border: 1px solid #fff;
	//border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 175, 167, 1)) 2 2;
	font-size: 28px;
	color: #fff;
	padding: 0 20px;
}
.goStore{
	position: absolute;
	right: 10px;
	top: 16px;
}
.pos-f{
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1111;
	height: 88px;
}
/deep/.van-list__finished-text {
	color: #fff;
}
/deep/.van-hairline--bottom:after{
	border-bottom: none;
}
</style>
